react-router

• createBrowserHistory

  • 创建一个浏览器history， 本质上是对window.history进行了二次封装，拦截了其原有方法，增加location属性进行存储location信息，并返回history对象

  • 增加了 listen 方法，当setState（push、replace、go） 时触发listener的更新

  • parsePath 解析 传入的pathname（用? 解析search，用#解析hash），返回自定义的location对象

  • push方法：解析path，创建 location，调用 history.pushState() 更新浏览器显示的url，调用setState() 更新从而触发listener更新队列，然后触发Route监听事件，根据最新的location信息匹配更新对应组件

  • history.pushState() 不会造成页面重刷，新的 URL 和之前的 URL 只是锚的数据不同

• Router组件

  • (本质上是react-router中的组件)

  • 接收一个history作为props，并对history进行监听，当listener 更新时，就更新location

  • Router 将history/location/match(解析pathname)作为上下文信息传递下去（Provider

  ）

  • Route 组件接收context传下来的信息进行更新（match匹配）相关组件，组件 component 作为props传进来（Consumer）

  • useParams 方法，获取上下文中的match.params